미션

구현 과제

• 실습 내용 완성해오기
• 4주차 미션 화면 뷰스케치를 피그마에 완성해오기
• 본인이 뷰 스케치를 바탕으로 프로필 화면을 직접 구현하기
• 각 컴포넌트에 State Hoisting 적용하기
• 프로필 화면에 사용된 스타일(색상, 타이포그래피) 피그마와 동일하게 구현하기

설명

1. 구조적 내비게이션: Route로 주소를 정의하고 MainNavHost에서 화면을 갈아끼우는 방식을 사용했습니다. 하단 바는 Scaffold에 고정되어 어디서든 편리하게 화면을 이동할 수 있습니다.
2. 컴포넌트 중심 UI: 피그마 디자인을 분석해 재사용 가능한 공통 컴포넌트와 화면 전용 내부 컴포넌트로 나누어 개발했습니다. LazyColumn을 도입해 긴 화면(프로필, 뉴스)도 부드럽게 스크롤됩니다.
3. 표준화된 상태 관리: **State Hoisting(상태 호이스팅)**을 적용해 스위치 같은 UI 상태를 부모에서 관리하며, 피그마와 동일한 폰트 및 컬러 시스템을 앱 전체에 일관되게 입혔습니다.

스크린샷